<template>
  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
    <van-swipe-item v-for="item of dataList" :key="item" @click="jump(item.videoId)">
      <img :src="item.imageUrl" :style="{ width: '100%', height: '100%' }"/>
    </van-swipe-item>
    <template #indicator="{ active, total }">
    <div class="custom-indicator">
      <div class="indicator-item" :style="{ background: active === index ? '#fff' : '#ccc' }" v-for="(item, index) of total" :key="index"></div>
    </div>
  </template>
  </van-swipe>
</template>

<script setup>
  const props = defineProps({
    dataList: { type: Array, default: () => ([]) }
  })

  const emit = defineEmits([ 'jump' ]);

  //  跳转到详情页
  const jump = (id) => {
    emit('jump', { path: `/VideoPlay/${id}`});
  }
</script>

<style lang="scss" scoped>
.my-swipe .van-swipe-item {
  width: 100vw;
  height: 20rem;
  color: #fff;
  line-height: 16rem;
  text-align: center;
  background-color: #39a9ed;
}

.custom-indicator {
    position: absolute;
    display: flex;
    width: 100vw;
    justify-content: center;
    bottom: 1rem;
    z-index: 10;

    .indicator-item {
      margin-right: 1rem;
      width: 2rem;
      height: .4rem;
      border-radius: .2rem;
      background: red;
    }
  }
</style>